<template>
  <a-modal
    :visible="visible"
    :cancelButtonProps="{ style: { display: 'none' } }"
    :afterClose="hanldeAfterClose"
    :width="1120"
    @cancel="handleCancel"
    @ok="handleOk"
    title="项目计划详情"
  >
    <a-spin :spinning="spinning">
      <a-descriptions bordered>
        <a-descriptions-item label="计划名称"> {{ detailData.Name }} </a-descriptions-item>
        <a-descriptions-item label="状态"> {{ detailData.Mode === 0 ? '正常' : '暂无数据' }} </a-descriptions-item>
        <a-descriptions-item label="项目年度"> {{ detailData.Years }}年度 </a-descriptions-item>
        <a-descriptions-item label="计划所属部门/单位"> {{ detailData.DeptName }} </a-descriptions-item>
        <a-descriptions-item label="开始时间"> {{ detailData.CreateDate | moment('YYYY-MM-DD') }} </a-descriptions-item>
        <a-descriptions-item label="预计完成时间"> {{ detailData.PredictDate | moment('YYYY-MM-DD') }} </a-descriptions-item>
        <a-descriptions-item label="计划总面积(m²)"> {{ detailData.GoalArea }}m² </a-descriptions-item>
        <a-descriptions-item label="计划总套数(套)"> {{ detailData.GoalPiece }} </a-descriptions-item>
        <a-descriptions-item label="计划总资金(万元)">
          {{ detailData.PredictFund | NumberFormat }}万元
        </a-descriptions-item>
        <a-descriptions-item label="备注">{{ detailData.Content }}</a-descriptions-item>
      </a-descriptions>
      <file-list
        v-if="visible"
        ref="fileList"
        category="SCTP"
        :fieldNames="{ label: 'DROPVALUE', value: 'DROPKEY' }"
        tableNames="ebll_No001YPlan"
        :fileList="detailData.SCWJJH"
        :option="{
          disabled: true,
        }"
      ></file-list>
    </a-spin>
  </a-modal>
</template>

<script>
import { getProjectPlanDetail } from '@/api/followUpManagement'
import { fileList } from '@/components'
export default {
  components: {
    fileList
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      spinning: false,
      detailData: {}
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      getProjectPlanDetail({
        ID: this.data.ID
      })
        .then((res) => {
          this.detailData = res.data
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.detailData = {}
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.close()
    },
    hanldeAfterClose () {}
  }
}
</script>
<style scoped>
</style>
